<template>
  <div class="content-tree">
    <p class="title">公司组织架构(总人数:372)</p>
    <el-tree
      :data="treeData"
      accordion
      :props="defaultProps"
      @node-click="handleNodeClick"
      icon-class="el-icon-plus"
    ></el-tree>
  </div>
</template>

<script>
export default {
  name: "TreeArea",
  data() {
    return {
      treeData: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

<style lang="scss">
.content-tree {
  overflow: scroll;
  margin-right: 10px;
  height: calc(100vh - 270px);
}
.title {
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 10px 0;
  border-bottom: 2px solid #00cc8b;
  display: inline-block;
}
.el-tree-node:focus > .el-tree-node__content {
  background: #00cc8b;
  color: #fff;
}
.el-tree-node > .el-tree-node__content:hover {
  background: #00cc8b;
  color: #fff;
}
.el-tree {
  position: relative;
  cursor: default;
  border: 1px solid #dcd2d2;
  border-bottom: none;
  background: #f5f5f5;
}
.el-tree-node__content {
  display: flex;
  align-items: center;
  height: 26px;
  cursor: pointer;
  padding: 5px 0;
  border-bottom: 1px solid #dcd2d2;
}
</style>
